.banner {
    width      : 86%;
    height     : 80px;
    line-height: 80px;
    margin     : 0 auto;

    a {
        height      : 100%;
        line-height : 60px;
        margin-left : 20px;
        margin-right: 130px;
        font-size   : 18px;
        font-weight : 550;

        &:last-child {
            margin-right: 0px;
            margin-left : 350px;
            outline     : solid 200 px;
            z-index     : 100;
        }

        &:first-child {
            margin-left: 60px;
        }

        &:hover {
            border-bottom: 2px solid #f6cc0d;
        }
    }
}

.enroll {
    width : 80%;
    height: 80vh;
    margin: 0 auto;

    background-color      : #fff3ba;
    border-top-left-radius: 60px;
    position              : relative;


    .swordIcon {
        width   : 60px;
        position: absolute;
        left    : 20px;
        top     : 60%;
    }

    .sword-r {
        left     : 60px;
        transform: rotateY(180deg);
    }

    .bigtitle {
        font-size: 60px;
        position : absolute;
        left     : 50px;
        top      : 10%;
    }

    .registerBtn {
        position: absolute;
        left    : 50%;
        top     : 25px;

        button {
            background-color: #fff;
            width           : 60px;
            height          : 30px;
            border          : none;
            border-radius   : 300px;
            outline         : none;

            &:hover {
                background-color: #7c765a;
            }
        }

        .active {
            background-color: #f6cc0d;
            transform       : translateX(-30px);
        }

        .login {
            width      : 80px;
            text-align : left;
            text-indent: 1em;
        }
    }

    form {
        width                 : 43%;
        margin-left           : 150px;
        text-align            : center;
        // outline            : solid 1px;
        // background-color: pink;

        div {
            margin-top: 11px;
        }

        .name {

            margin-left: -147px;

            input {
                width: 300px;
            }
        }

        .tel {
            input {
                margin-right: 5px;

                width        : 30px;
                height       : 30px !important;
                border-radius: 0px !important;
                outline      : none;
                box-shadow   : 3px 3px 5px gray !important;
            }


        }

        .yzm {
            height       : 60px;
            margin-top   : -20px;
            margin-bottom: 0px !important;

            input {
                border       : 0px;
                border-bottom: 2px solid #7c765a;
                background   : rgba(0, 0, 0, 0);
                width        : 100px;
                outline      : none;

            }

            span {
                display  : inline-block;
                color    : #fff;
                font-size: 12px;
                width    : 8%;

                border-radius   : 50px;
                background-color: #7c765a;
                margin-left     : 5px;
                margin-right    : -430px;

                &:hover {
                    color: #928f99;
                }
            }
        }

        .email {
            margin-left: -120px;

            input {
                width: 300px;
            }
        }

        .password {
            margin-left: -118px;

            input {
                width      : 300px;
                margin-left: 24px;
            }
        }

        .headImg {
            display       : block;
            width         : 150px;
            // margin-left: 20px;
            margin        : 0 auto;
            padding-top   : 70px;
        }

        .line {
            height    : 35px;
            // outline: solid 1px;
        }

        .inputC {
            background-color: #7c765a;
            outline         : none;
            border          : none;
            height          : 30px;
            border-radius   : 300px;
            box-shadow      : 1px 1px 10px lightgray;
            text-indent     : 2em;
            color           : whitesmoke;
        }

        .name,
        .tel,
        .yzm,
        .email,
        .password {
            font-size    : 20px;
            font-weight  : 600;
            line-height  : 30px;
            margin-bottom: 20px
        }

        .name {
            .line;
            margin-top: 30px;

            input {
                .inputC;
            }
        }

        .tel {
            .line;

            input {
                .inputC
            }
        }

        .email {
            .line;

            input {
                .inputC;
            }
        }

        .password {
            .line;

            input {
                .inputC;
            }
        }

        .sub1 {}
    }


    .enroll_right {
        position : absolute;
        top      : -240px;
        right    : 0;
        height   : 100vh;
        transform: scale(0.8);

        .right_l {
            float: left;



            .l_s {
                position: relative;

                img:nth-child(1) {
                    position: absolute;
                    width   : 160px;
                    height  : 420px;
                    left    : -150px;
                }

                img:nth-child(2) {
                    position: absolute;
                    top     : 320px;
                    left    : -164px;
                }
            }

            .l_x {
                position: relative;

                img:nth-child(1) {
                    position: absolute;
                    bottom  : -712px;
                    width   : 103px;
                    left    : -97px;

                }

                img:nth-child(2) {
                    position: absolute;
                    bottom  : -990px;
                    width   : 138px;
                    left    : -150px;
                }


            }

        }

    }

    .right_r {
        float       : right;
        margin-top  : 50px;
        margin-right: -100px;
        position    : relative;

        img {
            width: 500px;
        }

        .back {
            position           : absolute;
            display            : block;
            // background-color: turquoise;
            bottom             : 841px;
            right              : 105px;
            width              : 100px;
            height             : 50px;
            outline            : solid 1 px;

            &:hover {
                background-color: rgba(1, 1, 1, 0.2);
            }

        }
    }
}






.sub1,
.sub2,
.sub3 {
    position: absolute;
    left    : 0;
    bottom  : 5px;
    width   : 40px;
}

.go {
    position: absolute;
    width   : 30px;
    left    : 600px;
    bottom  : 100px;
    cursor  : pointer;
}

.sub1 {
    left: 23%;
}

.sub2 {
    left     : 33%;
    transform: translateY(-5px);
}

.sub3 {
    left: 43%;
}